import * as echarts from "echarts";
import useEchartsGraph from "./common/useEchartsGraph"

/**
 * Created by baidm in 2022/5/4 on 8:42
 */
const {initChart} = useEchartsGraph()
export default function () {
    // 初始化饼图
    const initPie = (elementId, chartData) => {
        let {name, data} = chartData
        const textStyle = {
            fontSize: 14,
            fontFamily: "MicrosoftYaHei",
            color: "#fff"
        }
        let option = {
            toolbox: {
                show: true,
                feature: {
                    mark: {show: true},
                }
            },
            tooltip: {
                trigger: 'item',
                position: "right",
                formatter: '{a}</br>{b}: {c}({d})',
                backgroundColor: 'transparent',
                textStyle
            },
            series: [
                {
                    name,
                    type: 'pie',
                    radius: [20, 60],
                    center: ['50%', '50%'],
                    roseType: 'area',
                    label: {
                        ...textStyle,
                        backgroundColor: 'transparent',
                    },
                    data
                }
            ]
        };

        return initChart(elementId, option)
    }

    // 初始化柱状图
    const initBar = (elementId, chartData) => {
        let {name, data, yAxisData} = chartData
        const textStyle = {
            fontSize: 14,
            fontFamily: "MicrosoftYaHei",
            color: "#fff"
        }
        let option = {
            grid: {
                left: '3%',
                right: '4%',
                top: '3%',
                containLabel: true
            },
            tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                formatter: '{a}</br>{b}: {c}',
                backgroundColor: 'transparent',
                textStyle
            },
            xAxis: {
                type: 'value',
                axisLabel: {
                    ...textStyle,
                    fontSize: 12,
                },
                splitLine: {
                    show: false
                }
            },
            yAxis: {
                type: 'category',
                data: yAxisData,
                axisLabel: {
                    ...textStyle,
                    fontSize: 12,
                },
                axisTick: {
                    show: false
                }
            },
            series: [
                {
                    name,
                    type: 'bar',
                    barWidth: 10,
                    itemStyle: {
                        color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                            {offset: 0, color: '#4c67eb'},
                            {offset: 1, color: '#00f6ff'}
                        ]),
                        borderRadius: [0, 8, 8, 0],
                    },
                    emphasis: {
                        itemStyle: {
                            color: new echarts.graphic.LinearGradient(0, 1, 1, 0, [
                                {offset: 0, color: '#00f6ff'},
                                {offset: 1, color: '#4c67eb'}
                            ])
                        }
                    },
                    data
                }
            ]
        };

        return initChart(elementId, option)
    }

    // 初始化雷达图
    const initRadar = (elementId, chartData) => {
        let {name, indicator, data} = chartData
        const textStyle = {
            fontSize: 14,
            fontFamily: "MicrosoftYaHei",
            color: "#fff"
        }
        let option = {
            color: ['rgba(255, 0, 0, 0.5)'],
            tooltip: {
                trigger: 'item',
                formatter: (params) => {
                    let {name, value} = params.data;
                    let textStr = ""
                    _.forEach(indicator, (item, index) => {
                        textStr += `</br>${item.name}:${value[index]}`
                    })
                    return `${name}${textStr}`
                },
                backgroundColor: 'transparent',
                borderWidth: 2,
                textStyle
            },
            radar: [
                {
                    indicator,
                    center: ['50%', '60%'],
                    radius: 100,
                    startAngle: 90,
                    shape: 'circle',
                    axisName: {
                        formatter: '{value}',
                        ...textStyle
                    },
                    splitArea: {
                        areaStyle: {
                            color: ['transparent'],
                        }
                    },
                    axisLine: {
                        lineStyle: {
                            color: 'rgba(255, 253, 255, 1)'
                        }
                    },
                    splitLine: {
                        lineStyle: {
                            color: 'rgba(255, 253, 255, 1)'
                        }
                    }
                },
            ],
            series: [
                {
                    type: 'radar',
                    lineStyle: {
                        width: 2,
                        color: 'rgba(255, 0, 0, 0.5)'
                    },
                    emphasis: {
                        lineStyle: {
                            width: 4,
                            color: 'rgba(255, 0, 0, 0.8)'
                        }
                    },
                    data: [
                        {
                            name,
                            value: data,
                            areaStyle: {
                                color: 'rgba(255, 0, 0, 0.5)'
                            }
                        }
                    ]
                },
            ]
        }

        return initChart(elementId, option)
    }

    return {
        initPie,
        initBar,
        initRadar
    }
}